<template>
  <div>
    <a-tabs default-active-key="1" size="large" @change="callback">
      <a-tab-pane key="1" tab="我的订单">
        <div class="odall" v-if="detFlag && !apiFlag && orderList.length > 0">
          <div class="all_top dlex2-div">
            <a-select
              default-value="全部订单"
              style="width: 120px"
              @change="handleChange"
            >
              <a-select-option value="全部订单"> 全部订单 </a-select-option>
              <a-select-option value="课程订单"> 课程订单 </a-select-option>
            </a-select>
            <a-input v-model="commName" class="serch" placeholder="商品名称" />
            <p style="flex: 1"></p>
            <a-button class="all_btn" @click="reset()">重置</a-button>
            <a-button class="all_btn" @click="search(1)" type="primary"
              >搜索</a-button
            >
          </div>
          <div class="dlex2-div title">
            <span>商品信息</span>
            <span style="margin-left: 313px">金额</span>
            <span style="margin-left: 178px">数量</span>
            <span style="margin-left: 81px">实付款</span>
            <span style="margin-left: 100px">操作</span>
          </div>
          <div
            class="orderList"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <div class="list_top">
              <span>下单时间：{{ item.orderDate }}</span>
              <span style="margin-left: 30px"
                >订单编号：{{ item.orderNo }}</span
              >
              <span style="margin-left: 30px"
                >订单类型：{{ item.orderType == "01" ? "课程" : "商城" }}</span
              >
              <span style="margin-left: 200px"
                >订单状态：<a
                  v-if="item.payStatus == '01'"
                  style="color: #0d4fae"
                  >未支付</a
                >
                <a v-if="item.payStatus != '01' && item.payStatus != '05'"
                  >已支付</a
                >
                <a v-if="item.payStatus == '05'">已关闭</a>
              </span>
            </div>
            <div
              class="list_bottom dlex2-div"
              v-for="(ioom, number) in item.commList"
              :key="number"
            >
              <img class="btm_img" :src="imageWebUrl + ioom.cover" alt="" />
              <div class="basics">
                <span class="titleTxt1">{{ ioom.name }}</span
                ><span class="titleTxt2">来源：{{ ioom.source }}</span>
              </div>
              <span class="x5TXt">¥{{ ioom.originalPrice }}</span>
              <div class="jtxt">{{ ioom.quantity }}</div>
              <div class="jtxt">
                <span class="redTxt">￥{{ item.totalPrice }}</span>
              </div>
              <div class="jtxt">
                <div>
                  <span
                    class="funtxt"
                    @click="Component1Data(false, item.orderNo)"
                    >详情</span
                  >
                  <a-button
                    type="primary"
                    @click="getJumporder(item.orderNo)"
                    v-if="judge(item.payStatus, item.payDate, item.payCode)"
                  >
                    去支付
                  </a-button>
                  <span
                    @click="Component2Data(true, item.orderNo)"
                    class="funtxt"
                    v-if="item.payStatus && item.payDate && item.payCode"
                    >申请发票</span
                  >
                  <a-popconfirm
                    title="确定删除？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="selDelete(item)"
                  >
                    <span class="funtxt" v-if="item.payStatus == '05'">
                      删除
                    </span>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>

          <a-pagination
            style="text-align: center; margin-top: 32px"
            @change="onChange"
            v-model="current"
            :pageSize="3"
            :total="curall"
            show-less-ioom
          />
        </div>

        <!-- 详情 -->
        <Detailsa
          v-show="!detFlag"
          :detFlag="detFlag"
          @changeComponent1Data="Component1Data"
          ref="asdtelo1"
        />
        <!-- 请求开发票 -->
        <Apply
          :detFlag="apiFlag"
          v-show="apiFlag"
          @changeComponent2Data="Component2Data"
          ref="apielo1"
        />
        <!-- 空数据 -->
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto"
          v-if="orderList.length < 1 && !spFlag"
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="待付款" force-render>
        <div class="odall" v-if="detFlag && !apiFlag && orderList.length > 0">
          <div class="all_top dlex2-div">
            <a-select
              default-value="全部订单"
              style="width: 120px"
              @change="handleChange"
            >
              <a-select-option value="全部订单"> 全部订单 </a-select-option>
              <a-select-option value="课程订单"> 课程订单 </a-select-option>
            </a-select>
            <a-input v-model="commName" class="serch" placeholder="商品名称" />
            <p style="flex: 1"></p>
            <a-button class="all_btn" @click="reset()">重置</a-button>
            <a-button class="all_btn" @click="search(1)" type="primary"
              >搜索</a-button
            >
          </div>
          <div class="dlex2-div title">
            <span>商品信息</span>
            <span style="margin-left: 313px">金额</span>
            <span style="margin-left: 178px">数量</span>
            <span style="margin-left: 81px">实付款</span>
            <span style="margin-left: 100px">操作</span>
          </div>
          <div
            class="orderList"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <div class="list_top">
              <span>下单时间：{{ item.orderDate }}</span>
              <span style="margin-left: 30px"
                >订单编号：{{ item.orderNo }}</span
              >
              <span style="margin-left: 30px"
                >订单类型：{{ item.orderType == "01" ? "课程" : "商城" }}</span
              >
              <span style="margin-left: 200px"
                >订单状态：<a
                  v-if="item.payStatus == '01'"
                  style="color: #0d4fae"
                  >未支付</a
                >
                <a v-if="item.payStatus != '01' && item.payStatus != '05'"
                  >已支付</a
                >
                <a v-if="item.payStatus == '05'">已关闭</a>
              </span>
            </div>
            <div
              class="list_bottom dlex2-div"
              v-for="(ioom, number) in item.commList"
              :key="number"
            >
              <img class="btm_img" :src="imageWebUrl + ioom.cover" alt="" />
              <div class="basics">
                <span class="titleTxt1">{{ ioom.name }}</span
                ><span class="titleTxt2">来源：{{ ioom.source }}</span>
              </div>
              <span class="x5TXt">¥{{ ioom.originalPrice }}</span>
              <div class="jtxt">{{ ioom.quantity }}</div>
              <div class="jtxt">
                <span class="redTxt">￥{{ ioom.originalPrice }}</span>
              </div>
              <div class="jtxt">
                <div>
                  <span
                    class="funtxt"
                    @click="Component1Data(false, item.orderNo)"
                    >详情</span
                  >
                  <a-button
                    type="primary"
                    @click="getJumporder(item.orderNo)"
                    v-if="judge(item.payStatus, item.payDate, item.payCode)"
                  >
                    去支付
                  </a-button>
                  <span
                    @click="Component2Data(true, item.orderNo)"
                    class="funtxt"
                    v-else
                    >申请发票</span
                  >
                  <a-popconfirm
                    title="确定删除？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="selDelete(item)"
                  >
                    <span class="funtxt" v-if="item.payStatus == '05'">
                      删除
                    </span>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>

          <a-pagination
            style="text-align: center; margin-top: 32px"
            @change="onChange"
            v-model="current"
            :pageSize="3"
            :total="curall"
            show-less-ioom
          />
        </div>

        <!-- 详情 -->
        <Detailsa
          v-show="!detFlag"
          :detFlag="detFlag"
          @changeComponent1Data="Component1Data"
          ref="asdtelo2"
        />
        <!-- 请求开发票 -->
        <Apply
          :detFlag="apiFlag"
          v-show="apiFlag"
          @changeComponent2Data="Component2Data"
          ref="apielo2"
        />
        <!-- 空数据 -->
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto"
          v-if="orderList.length < 1 && !spFlag"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="已完成">
        <a-empty
          :image="imgUrl"
          :image-style="{
            height: '220px',
          }"
          style="margin: 0 auto"
          v-if="orderList.length < 1 && !spFlag"
        />
        <div class="odall" v-if="detFlag && !apiFlag && orderList.length > 0">
          <div class="all_top dlex2-div">
            <a-select
              default-value="全部订单"
              style="width: 120px"
              @change="handleChange"
            >
              <a-select-option value="全部订单"> 全部订单 </a-select-option>
              <a-select-option value="课程订单"> 课程订单 </a-select-option>
            </a-select>
            <a-input v-model="commName" class="serch" placeholder="商品名称" />
            <p style="flex: 1"></p>
            <a-button class="all_btn" @click="reset()">重置</a-button>
            <a-button class="all_btn" @click="search(1)" type="primary"
              >搜索</a-button
            >
          </div>
          <div class="dlex2-div title">
            <span>商品信息</span>
            <span style="margin-left: 313px">金额</span>
            <span style="margin-left: 178px">数量</span>
            <span style="margin-left: 81px">实付款</span>
            <span style="margin-left: 100px">操作</span>
          </div>
          <div
            class="orderList"
            v-for="(item, index) in orderList"
            :key="index"
          >
            <div class="list_top">
              <span>下单时间：{{ item.orderDate }}</span>
              <span style="margin-left: 30px"
                >订单编号：{{ item.orderNo }}</span
              >
              <span style="margin-left: 30px"
                >订单类型：{{ item.orderType == "01" ? "课程" : "商城" }}</span
              >
              <span style="margin-left: 200px"
                >订单状态：<a
                  v-if="item.payStatus == '01'"
                  style="color: #0d4fae"
                  >未支付</a
                >
                <a v-if="item.payStatus != '01' && item.payStatus != '05'"
                  >已支付</a
                >
              </span>
            </div>
            <div
              class="list_bottom dlex2-div"
              v-for="(ioom, number) in item.commList"
              :key="number"
            >
              <img class="btm_img" :src="imageWebUrl + ioom.cover" alt="" />
              <div class="basics">
                <span class="titleTxt1">{{ ioom.name }}</span
                ><span class="titleTxt2">来源：{{ ioom.source }}</span>
              </div>
              <span class="x5TXt">¥{{ ioom.originalPrice }}</span>
              <div class="jtxt">{{ ioom.quantity }}</div>
              <div class="jtxt">
                <span class="redTxt">￥{{ item.totalPrice }}</span>
              </div>
              <div class="jtxt">
                <div>
                  <span
                    class="funtxt"
                    @click="Component1Data(false, item.orderNo)"
                    >详情</span
                  >
                  <a-button
                    type="primary"
                    @click="getJumporder(item.orderNo)"
                    v-if="judge(item.payStatus, item.payDate, item.payCode)"
                  >
                    去支付
                  </a-button>
                  <span
                    @click="Component2Data(true, item.orderNo)"
                    class="funtxt"
                    v-else
                    >申请发票</span
                  >
                  <a-popconfirm
                    title="确定删除？"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="selDelete(item)"
                  >
                    <span class="funtxt" v-if="item.payStatus == '05'">
                      删除
                    </span>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </div>

          <a-pagination
            style="text-align: center; margin-top: 32px"
            @change="onChange"
            v-model="current"
            :pageSize="3"
            :total="curall"
            show-less-items
          />
        </div>

        <!-- 详情 -->
        <Detailsa
          v-show="!detFlag"
          :detFlag="detFlag"
          @changeComponent1Data="Component1Data"
          ref="asdtelo3"
        />
        <!-- 请求开发票 -->
        <Apply
          :detFlag="apiFlag"
          v-show="apiFlag"
          @changeComponent2Data="Component2Data"
          ref="apielo3"
        />
      </a-tab-pane>
    </a-tabs>
    <!-- 加载状态 -->
    <div>
      <a-spin v-if="spFlag" size="large" />
    </div>
  </div>
</template>
<script>
import Detailsa from "@/components/news/detailsOrder.vue";
import Apply from "@/components/news/apply.vue";

export default {
  components: {
    Detailsa,
    Apply,
  },
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),

      // 控制详情的显隐
      detFlag: true,
      apiFlag: false,
      spFlag: true,
      // 关键字
      commName: "",
      // 选择
      current: 1,
      // 总
      curall: 1,
      // 订单列表
      orderList: [],
      //
      payStatus: "",
    };
  },
  created() {
    this.getOrderlist(1);
  },
  methods: {
    callback(key) {
      switch (key) {
        case "1":
          this.payStatus = "";
          this.reset();
          break;
        case "2":
          this.payStatus = "01";
          this.reset();
          break;
        case "3":
          this.payStatus = "04";
          this.reset();
          break;

        default:
          break;
      }
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    // 跳转订单购买页
    getJumporder(e) {
      if (!this.$store.state.token) {
        this.$refs["login"].tabIndex = 0;
        this.$refs["login"].tabType = 0;
        this.$refs["login"].maskClosable = true;
        this.$refs["login"].visible = true;
        return;
      }
      this.$router.push("/order/recordOrder?orderNo=" + e);
    },
    // 接手来自详情子组件的值
    Component1Data(params, e) {
      this.spFlag = true;
      if (!params) {
        this.selectionAll(e);
      }
      setTimeout(() => {
        this.detFlag = params;
        this.spFlag = false;
      }, 1000);
    },
    //
    // 具体查询
    selectionAll(e) {
      switch (this.payStatus) {
        case "":
          this.$refs.asdtelo1.getOrder(e);
          this.$refs.apielo1.getOrder(e);
          break;
        case "01":
          this.$refs.asdtelo2.getOrder(e);
          this.$refs.apielo2.getOrder(e);
          break;
        case "04":
          this.$refs.asdtelo3.getOrder(e);
          this.$refs.apielo3.getOrder(e);
          break;

        default:
          console.log("sbs" + this.payStatus);
          break;
      }
    },
    // 接手来自详情子组件的值
    Component2Data(params, e) {
      if (params) {
        this.selectionAll(e);
      }
      this.spFlag = true;

      setTimeout(() => {
        this.apiFlag = params;
        this.spFlag = false;
      }, 1000);
    },
    //
    onChange(e) {
      // console.log(e);
      this.getOrderlist(e);
    },
    // 重置
    reset() {
      (this.commName = ""), (this.current = 1);
      this.getOrderlist(1);
      this.spFlag = true;
      this.detFlag = true;
      this.apiFlag = false;
      setTimeout(() => {
        this.spFlag = false;
      }, 1000);
    },
    // 搜索功能
    search(e) {
      this.current = 1;
      this.getOrderlist(e);
    },
    // 获取订单列表
    getOrderlist(e) {
      this.$ajax({
        url: "/order/order/list?pageIndex=" + e + "&pageSize=" + 3,
        method: "post",
        params: {
          commName: this.commName,
          payStatus: this.payStatus,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.orderList = res.data.list;
          this.curall = res.data.totalCount;
          this.spFlag = false;
        } else {
          this.spFlag = true;
        }
      });
    },
    // 判断状态,有几种情况，没支付但是关闭了，这个时候a肯定是05状态，但是其他的可能是null，这个方法就是因为考虑到这种情况写的
    judge(a, b, c) {
      if (b == null || c == null || a == null) {
        if (a == "05") {
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    },
    // 删除功能
    selDelete(e) {
      e.delFlag = "Y";
      this.$ajax({
        url: "/order/order/bacth/update",
        method: "post",
        params: e,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.getOrderlist(1);
        } else {
          this.$message.success("操作失败，请稍候再试。");
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.odall {
  width: 100%;
  .all_top {
    .serch {
      width: 166px;
      height: 30px;
      background: #ffffff;
      border-radius: 1px;
      display: block;
      border: 1px solid #cccccc;
      margin-left: 40px;
    }
    .all_btn {
      width: 92px;
      height: 40px;
      border-radius: 4px;
      margin-left: 32px;
    }
  }
  .title {
    width: 920px;
    height: 50px;
    background: #f5f5f5;
    padding: 0 20px;
    margin-top: 17px;
    span {
      display: block;
      font-size: 14px;
      font-family: PingFang SC;
      color: #333333;
      line-height: 20px;
    }
  }
  .orderList {
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid #cccccc;
    .list_top {
      width: 920px;
      padding: 15px 16px;
      background: #fafafa;
      span {
        font-size: 12px;
        font-family: PingFang SC;
        color: #666666;
      }
    }
    .list_bottom {
      width: 920px;
      height: 121px;
      border-top: 1px solid #cccccc;
      .btm_img {
        width: 144px;
        height: 81px;
        border: #cccccc 1px solid;
        display: block;
        margin: 0 20px;
      }
      .basics {
        width: 204px;
        overflow: hidden;
      }
      .titleTxt2 {
        font-size: 15px;
        color: #666666;
      }
      .x5TXt {
        flex: 1;
      }
      .jtxt {
        width: 120px;
        height: 120px;
        border-left: 1px solid #cccccc;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        .funtxt {
          font-size: 12px;
          font-family: PingFang SC;
          color: #333333;
          display: block;
          cursor: pointer;
          margin-bottom: 9px;
        }
        .funtxt:hover {
          color: #ffbe37;
        }
      }
    }
  }
}

.titleTxt1 {
  display: block;
  width: 200px !important;
  overflow: hidden;
}
</style>
